<template>
  <view class="container">
    <view v-if="loading" class="loading">
      <uni-load-more status="loading" />
    </view>
    <view v-else-if="lawyer" class="content">
      <view class="card">
        <view class="header">
          <view class="basic-info">
            <text class="name">{{lawyer.lawyerName}}</text>
            <text class="title">{{lawyer.title}}</text>
            <text class="law-firm">{{lawyer.lawFirmName}}</text>
          </view>
          <view class="status-container">
            <text :class="['status', lawyer.onlineStatus === '1' ? 'online' : 'offline']">
              {{lawyer.onlineStatus === '1' ? '在线' : '离线'}}
            </text>
          </view>
        </view>

        <view class="section">
          <text class="section-title">执业信息</text>
          <text class="info">执业年限：{{lawyer.practiceYears}}年</text>
          <text class="info">专业领域：{{lawyer.expertise}}</text>
          <text class="info">执业证号：{{lawyer.licenseNo}}</text>
        </view>

        <view class="section">
          <text class="section-title">咨询信息</text>
          <text class="price">咨询费用：¥{{lawyer.consultationPrice}}/次</text>
          <view class="rating">
            <text>评分：{{lawyer.averageRating}}</text>
            <uni-icons type="star-filled" size="16" color="#F5A623" />
          </view>
        </view>

        <view class="section">
          <text class="section-title">个人简介</text>
          <text class="introduction">{{lawyer.introduction}}</text>
        </view>
      </view>

      <button class="consult-button" @click="handleConsult">
        立即咨询
      </button>
    </view>
    <view v-else class="error">
      <text>获取律师信息失败</text>
    </view>
  </view>
</template>

<script>
import { getLawyerDetail } from '@/api/lawyer'

export default {
  data() {
    return {
      lawyer: null,
      loading: true
    }
  },
  onLoad(options) {
    if (options.id) {
      this.fetchLawyerDetail(options.id)
    }
  },
  methods: {
    async fetchLawyerDetail(lawyerId) {
      try {
        this.loading = true
        const response = await getLawyerDetail(lawyerId)
        if (response.code === 200) {
          this.lawyer = response.data
        } else {
          uni.showToast({
            title: '获取律师详情失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取律师详情失败:', error)
        uni.showToast({
          title: error.message || '获取律师详情失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    handleConsult() {
      // 实现咨询功能
      uni.showToast({
        title: '咨询功能开发中',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  flex: 1;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.content {
  padding: 16rpx;
}

.card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 32rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32rpx;
}

.basic-info {
  flex: 1;
}

.name {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.title {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.law-firm {
  font-size: 28rpx;
  color: #888;
}

.status-container {
  justify-content: center;
}

.status {
  font-size: 28rpx;
  font-weight: 500;
  
  &.online {
    color: #4CAF50;
  }
  
  &.offline {
    color: #9E9E9E;
  }
}

.section {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
}

.info {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.price {
  font-size: 32rpx;
  color: #e74c3c;
  margin-bottom: 8rpx;
}

.rating {
  font-size: 28rpx;
  color: #666;
  display: flex;
  align-items: center;
  
  text {
    margin-right: 8rpx;
  }
}

.introduction {
  font-size: 28rpx;
  color: #666;
  line-height: 40rpx;
}

.consult-button {
  background-color: #0066cc;
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
  border-radius: 16rpx;
  padding: 24rpx 0;
  margin: 0 32rpx;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx 0;
}

.error {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx 0;
  
  text {
    color: #e74c3c;
    font-size: 32rpx;
  }
}
</style> 